<template>
	<view>
		<view class="select_warp">
			<view class="manage_tab">
				<view class="tab_array">
					<image @click="doSearch" :src="BASE_IMG_URL+'ss.png'"  mode="scaleToFill"></image>
					<input type="text" :class="condition ? 'valueactive' : '' " @confirm="doSearch"
						v-model="condition" placeholder="会员名/手机号" class="li_box" />
				</view>
				<view class="tab_screen" @click="showSearch = true">
				</view>
			</view> 
		</view>
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index">
				<view class="info_head">
					<view>{{item.memberName}}{{item.card_name? '-'+item.card_name:''}}</view> 
					<view>{{item.card_desc? '  '+item.card_desc:''}}</view>
				</view>
				<view class="info_main"  v-if="item.card_name" >
					<view @click="choose(item.id,1)">
						<view class="main_left">
						<!-- 	<view class="left_top" style="margin: 30rpx 0;color: #666;font-size: 30rpx;">
								{{item.card_name}}{{item.card_desc? '-'+item.card_desc:''}}
							</view> --> 
							<view  class="left_foot">
								<view class="l_box">
									<!-- <span>{{item.remark}}</span> -->
										<view v-for="card in item.card_content">
										<view  style="padding: 5rpx;" v-if="card.goods_type==2">储值：[{{card.consume}}/{{card.price}}]  赠送：[{{card.giveSurplus}}/{{card.giveAmount}}]</view>
										<view  style="padding: 5rpx;" v-if="card.goods_type!=2">{{card.goods.goods_name}} [{{card.surplus}}/{{card.count}}]</view>
										</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="info_footer">
					<view class="footer_content" @click="onChoose(item)">
						<image :src="BASE_IMG_URL+'tj.png'"  mode="scaleToFill"></image>
						<view>选择</view>
					</view> 
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view> 
	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
	import {
		customerSortDatas
	} from 'components/content/data/data.js';
	import { BASE_IMG_URL } from '@/util/api.js'
	import {
		customerPageJumps
	} from "../crm_page_jumps.js"; 
	import {
		netAgentList
	} from '@/api/clues.js'
	import {
		netMemberCardList
	} from '@/api/main.js'
	export default {
		mixins: [customerPageJumps],
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				condition: '',
				showSearch: false,
				date: '',
				show: false, 
				queryObj: {},
				page: 1,
				totalPage: 1,
				limit: 10,
				list: [], 
			}
		},
		components: {
			selectTemp,
			uniTabbar
		},
		onLoad(options) {
			 
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				return
			}
			this.page++
			this.getList()
		},
		methods: { 
			//搜索
			doSearch() {
				this.page = 1
				this.totalPage = 1
				this.list = []
				this.showSearch = false
				this.getList()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					condition: this.condition
				}
				netMemberCardList(params).then(res => {
					res = res.data
					this.list = this.list.concat(res.list)
					this.page = res.page
					this.totalPage = res.totalPage
				})
			},
			 
			onChoose(cashierMemberCard) {
				uni.setStorageSync('cashierMemberCard', cashierMemberCard)
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	 .select_warp{
	 	z-index: 9;
	 	position: relative;
	 }
	 .searchbox {
	 	width: 100%;
	 	height: 80rpx;
	 	line-height: 80rpx;
	 	background-color: #03AA96;
	 	display: flex;
	 	justify-content: space-around;
	 	margin-bottom: 40rpx;
	 	position: fixed;
	 	left: 0;
	 	top: 0;
	 	z-index: 1;
	 
	 	.tab_array {
	 		display: flex;
	 		background: #fff;
	 		border-radius: 34rpx;
	 		height: 68rpx;
	 		width: 467rpx;
	 		
	 		image {
	 			width: 50rpx;
	 			height: 50rpx;
	 			margin: 8rpx 15rpx 0 28rpx;
	 		}
	 	
	 		input {
	 			line-height: 68rpx;
	 			height: 68rpx;
	 		}
	 	}
	 	
	 	.searchtext {
	 		display: flex;
	 		justify-content: center;
	 		align-items: center;
	 		font-size: 30rpx;
	 		color: #999;
	 		margin-right: 55rpx;
	 	}
	 }
	 .manage_tab {
	 	width: 100%;
	 	height: 80rpx;
	 	line-height: 80rpx;
	 	background-color: #03AA96;
	 	display: flex;
	 	justify-content: space-around;
	 	margin-bottom: 40rpx;
	 	z-index: 1;
	 	.tab_array {
	 		display: flex;
	 		background: #fff;
	 		border-radius: 34rpx;
	 		height: 68rpx;
	 		width: 467rpx;
	 		overflow: hidden;
	 		image {
	 			width: 50rpx;
	 			height: 50rpx;
	 			margin: 8rpx 15rpx 0 28rpx;
	 		}
	 
	 		input {
	 			line-height: 68rpx;
	 			height: 68rpx;
	 		}
	 	}
	 
	 	.tab_screen {
	 		display: flex;
	 		image {
	 			width: 43rpx;
	 			height: 44rpx;
	 			margin-top: 10rpx;
	 		}
	 	}
	 }
	 
	 
	 
	 
	.clineInfo {
		background-color: #fff;
		padding: 30rpx 45rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

		.info_head {
			display: flex;
			justify-content: space-between;

			:first-child {
				font-size: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.info_main {
			display: flex;
			justify-content: space-between;

			.main_left {
				.left_followUp {
					display: flex;
					padding-bottom: 30rpx;
					font-size: 30rpx;
					color: #666;
				}

				.left_star {
					font-size: 30rpx;
					color: #666;
					display: flex;
					padding-bottom: 30rpx;
				}

				.left_foot {
					padding-bottom: 20rpx;

					.l_box {
						margin-right: 35rpx;
						float: left;

						span {
							background: rgba(3, 170, 150, .1);
							padding: 5rpx 12rpx;
							font-size: 26rpx;
							color: #03AA96;
							border-radius: 5rpx;
						}
					}
				}
			}

			.main_right {
				text-align: center;
				padding: 20rpx 15rpx 0 0;

				image {
					border-radius: 50%;
					width: 129rpx;
					height: 129rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.info_footer {
			display: flex;
			justify-content: space-around;
			padding-top: 30rpx;
			height: 80rpx;
			border-top: 1px solid #ededed;
			margin-top: 20rpx;

			.footer_content {
				// width: 25%;
				line-height: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 15rpx;
				}
				.icon-iconmore-copy,
				.icon-follow {
					font-size: 22rpx;
				}

				.icon-follow,
				.icon-task,
				.icon-tel {
					margin-right: 5rpx;
				}

				.icon-iconmore-copy {
					margin-left: 5rpx;
					margin-top: 2rpx;
				}
			}
		}
	}

	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 180rpx;
		right: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>
